/**
 * @title 占比变动趋势
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Spin } from 'antd';
import { SecondHeaderC, XYAxisChartsC, QuickQueryC } from '../../../../../comps';
import _ from 'lodash';

class RatioChangeTrend extends PureComponent {
  constructor() {
    super();
    this.state = {
      xAxis: [],
      series: [],
      zqfz: '0', // 证券负债 0-占比为负，1：占比为正
    };
  }
  componentDidMount() {
    const { searchData } = this.props;
    this.props.onRef(this);
    this.getData(searchData);
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    const { searchData } = nextProps;

    if (JSON.stringify(searchData) !== JSON.stringify(this.props.searchData)) {
      this.getData(searchData);
    }
  }

  // 父组件调用，改变查询条件时重新查询
  changeData = (args) => {
    this.setState(
      {
        zqfz: args?.zqfz || '0',
      },
      () => {
        const { searchData } = this.props;
        this.getData(searchData);
      },
    );
  };

  //获取数据
  getData = (args) => {
    const { zqfz } = this.state;
    this.props.dispatch({
      type: 'assetAllocationCM/queryTrendChart',
      payload: {
        ...args,
        zqfz: zqfz,
      },
      callback: (data) => {
        if (data && data?.series?.length && data?.xAxis?.length) {
          const newSeries = this.changSeries(data.series);
          this.setState({
            xAxis: data.xAxis,
            series: newSeries,
          });
        } else {
          this.setState({
            xAxis: [],
            series: [],
          });
        }
      },
    });
  };

  changSeries = (datas) => {
    let newDataSource = _.cloneDeep(datas);
    let newData = [];
    let nums = 0;
    newDataSource.map((item) => {
      newData = [];
      item.data.map((num) => {
        nums = (Number(num) * 100).toFixed(2);
        newData.push(nums);
      });
      item.data = newData;
    });
    return newDataSource;
  };
  // 图表切换
  chartChange = (e) => {
    this.setState({
      chartType: e,
    });
  };
  render() {
    const { xAxis, series, chartType } = this.state;
    const { colorType } = this.props;
    return (
      <div style={{ width: '100%' }}>
        <SecondHeaderC
          title='占比变动趋势图'
          colorType={colorType}
          Right={
            <QuickQueryC
              dataSource={[
                { value: '0', title: '折线图' },
                { value: '1', title: '堆叠图' },
              ]}
              initialValue='0'
              onChange={(e) => this.chartChange(e)}
            />
          }
        />
        <Spin spinning={this.props.loading == true}>
          {chartType == '0' ? (
            <XYAxisChartsC series={series} xAxis={xAxis} height={400} type='line' yAxisUnit={['单位(%)']} dataZoom={true} colorType={colorType} />
          ) : (
            <XYAxisChartsC series={series} xAxis={xAxis} height={400} type='areaStack' yAxisUnit={['单位(%)']} dataZoom={true} colorType={colorType} />
          )}
        </Spin>
      </div>
    );
  }
}

export default connect(({ assetAllocationCM, loading }) => ({
  assetAllocationCM,
  loading: loading.effects['assetAllocationCM/queryTrendChart'],
}))(RatioChangeTrend);
